mixin price(name, p, nameWithoutCurrency)
  - var origPrice = p.priceStringNoSymbol()
  if origPrice % 1 === 0
    - origPrice = Math.floor(origPrice);
  - var salePrice = p.adjustedPriceStringNoSymbol()
  if salePrice % 1 === 0
    - salePrice = Math.floor(salePrice);
  if p.get('formattedAmount')
    .price(data-i18n=nameWithoutCurrency, data-i18n-options={price: p.get('formattedAmount')})
  else if origPrice == salePrice
    .price(data-i18n=name, data-i18n-options={price:origPrice})
  else if view.basicCoupon && view.basicCoupon.duration === 'once'
    .price.strike-price(data-i18n=name, data-i18n-options={price:origPrice})
    .new-price(data-i18n="subscribe.first_month_price", data-i18n-options={price:salePrice})
  else
    div
      span.old-price(data-i18n=name, data-i18n-options={price:origPrice})
      span.price(data-i18n=name, data-i18n-options={price:salePrice})

.modal-dialog
  .modal-content
    if view.state === 'purchasing'
      .alert.alert-info(data-i18n="buy_gems.purchasing")

    else if view.state === 'retrying'
      #retrying-alert.alert.alert-danger(data-i18n="buy_gems.retrying")

    else
      img#subscribe-background(src="/images/pages/play/modal/subscribe-background-blank.png")

      h1(data-i18n="subscribe.subscribe_to_premium")

      div#close-modal
        span.glyphicon.glyphicon-remove

      div.paper-area
        .container-fluid
          .row
            .col-xs-5.option-col.col-xs-offset-1
              img(src="/images/pages/home/anya-and-nando-pet.webp")
            .col-xs-6
              ul.features-list
                li(data-i18n="subscribe.feature_products")
                li(data-i18n="subscribe.feature_heroes")
                li(data-i18n="subscribe.feature_learn")
                if view.basicProduct
                  li(data-i18n="subscribe.feature_gems", data-i18n-options={gems: view.basicProduct.get('gems').toLocaleString(), gems12: (view.basicProduct.get('gems') * 12).toLocaleString()})
                li(data-i18n="subscribe.feature_ai_level_bot")

        hr

        if view.lifetimeProduct
          .short-row.row
            if view.basicProduct && !view.hideMonthlySub
              .col-xs-5.option-col.col-xs-offset-1
              .option-col(class='.col-xs-5')
                .option-header.best-deal(data-i18n="subscribe.best_deal")
            else
              .option-col(class='.col-xs-12')
                .option-header.best-deal(data-i18n="subscribe.best_deal")
        .row
          - var secondRowClass = '.col-xs-5'
          if view.basicProduct && !view.hideMonthlySub
            .col-xs-5.option-col.col-xs-offset-1
              +price("subscribe.month_price", view.basicProduct, 'subscribe.month_price_without_currency')
              .option-header.price-subtext.text-center(data-i18n="subscribe.stripe_description")
              button.btn.btn-lg.btn-illustrated.purchase-button
                span.buy-now-text(data-i18n="subscribe.buy_now")
                span.buy-lock-icon &#x1F512;

          else
            - var secondRowClass = '.col-xs-12'

          if view.basicProductAnnual
            .option-col(class=secondRowClass)
              +price("subscribe.year_price", view.basicProductAnnual, 'subscribe.year_price_without_currency')
              .option-header.price-subtext.text-center(data-i18n="subscribe.year_subscription")
              if view.paymentProcessor === 'PayPal'
                #paypal-button-container
              else
                button.stripe-annual-button.btn.btn-lg.btn-illustrated
                  span.buy-now-text(data-i18n="subscribe.buy_now")
                  span.buy-lock-icon &#x1F512;

          else if view.lifetimeProduct
            .option-col(class=secondRowClass)
              +price("subscribe.lifetime_price", view.lifetimeProduct, "subscribe.lifetime_price")
              .option-header.price-subtext.text-center(data-i18n="subscribe.lifetime")
              if view.paymentProcessor === 'PayPal'
                #paypal-button-container
              else
                button.stripe-lifetime-button.btn.btn-lg.btn-illustrated
                  span.buy-now-text(data-i18n="subscribe.buy_now")
                  span.buy-lock-icon &#x1F512;

        if view.isParentHomeAccount && !view.purchasingForId
          div.parent-account.text-center
            p.warning-blurb(data-i18n="subscribe.sure_buy_as_parent")

        if me.get('country') && me.get('country') != 'united-states'
          // Probably not worth including in US, so many Stripe options
          div.support-blurb.text-center
            p
              span(data-i18n="subscribe.support_part1")
              =" "
              a(href="mailto:support@codecombat.com", data-i18n="subscribe.support_part2")

      if view.state === 'declined'
        #declined-alert.alert.alert-danger.alert-dismissible
          span(data-i18n="buy_gems.declined")
          button.close(type="button" data-dismiss="alert")
            span(aria-hidden="true") &times;

      if view.state === 'error'
        #error-alert.alert.alert-danger.alert-dismissible
          button.close(type="button" data-dismiss="alert")
            span(aria-hidden="true") &times;
          p= view.stateMessage

      if view.state === 'unknown_error'
        #error-alert.alert.alert-danger.alert-dismissible
          button.close(type="button" data-dismiss="alert")
            span(aria-hidden="true") &times;
          p(data-i18n="loading_error.unknown")
          p= view.stateMessage
